<template>
  <div class="content-container" style="position: relative;">
    <div class="panel">
      <div class="menu" style="background-color: rgba(35,192,161,1);" @click="$router.push({path:'/person-info'})">
        <img class="icon" src="@/assets/icon-person.png"/>
        <div class="title">个人信息</div>
      </div>
      <div class="menu" style="margin-left: 100px;" @click="$router.push({path:'/temp-order-center'})">
        <img class="icon" src="@/assets/icon-qz.png"/>
        <div class="title">零工订单中心</div>
      </div>
      <div class="menu" style="margin-left: 100px;background-color: rgba(244,131,121,1)"
           @click="$router.push({path:'/full-order-center'})">
        <img class="icon" src="@/assets/icon-linggong.png"/>
        <div class="title">全职订单中心</div>
      </div>
      <img class="system-logo-icon" src="@/assets/logo.png"></img>
    </div>
  </div>
</template>
<script>


import ReturnBtn from "@/views/components/ReturnBtn.vue";

export default {
  name: "position-query",
  components: {
    ReturnBtn
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.panel {
  position: relative;

  width: 100%;
  height: 100%;

  .bg {
    width: 400px;
    z-index: -1;
    left: 10px;
    top: 150px;
    position: absolute;
  }

  .menu {
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 260px;
    display: inline-block;
    border-radius: 16px;
    height: 300px;
    width: 300px;
    background-color: rgba(252, 192, 0, 1);

    .title {
      height: 100px;
      line-height: 100px;
      font-size: 40px;
      color: white;
    }

    .icon {
      display: block;
      width: 100px;
      height: 100px;
      margin: 60px auto 0 auto;
    }
  }
}
</style>
